<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>下属行政区查询</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style type="text/css">
        html,body,#container{
            height:100%;
        }
    </style>
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
</head>
<body>
    <div id="container"></div>

    <div class="input-card">
        <div class="info">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h4>基本信息填写</h4><hr>
                </div><!-- /.box-header -->
                <div class="box-body">
                    <div class="input-item">
                        <div class="input-item-prepend"><span class="input-item-text" >姓名</span></div>
                        <input style="width:150px;margin-left: 10px"></input>
                    </div>
                    <div class="input-item">
                        <div class="input-item-prepend"><span class="input-item-text" >身份证号</span></div>
                        <input style="width:150px;margin-left: 10px"></input>
                    </div>
                    <div class="input-item">
                        <div class="input-item-prepend"><span class="input-item-text" >手机号码</span></div>
                        <input style="width:150px;margin-left: 10px"></input>
                    </div>
                    <div class="input-item">
                        <div class="input-item-prepend"><span class="input-item-text" >用户名(*)</span></div>
                        <input style="width:150px;margin-left: 10px"></input>
                    </div>
                    <div class="input-item">
                        <div class="input-item-prepend"><span class="input-item-text" >密码</span></div>
                        <input style="width:150px;margin-left: 10px"></input>
                    </div>
                    <div class="input-item">
                        <div class="input-item-prepend"><span class="input-item-text" >确认密码</span></div>
                        <input style="width:150px;margin-left: 10px"></input>
                    </div>
                </div><!-- /.box-body -->
            </div><!-- /.box -->
            <h4>所属行政区</h4><hr>
            <div class="input-item">
                <div class="input-item-prepend"><span class="input-item-text" >省市区</span></div>
                <select id='province' style="width:100px" onchange='search(this)'></select>
            </div>
            <div class="input-item">
                <div class="input-item-prepend"><span class="input-item-text" >地级市</span></div>
                <select id='city' style="width:100px" onchange='search(this)'></select>
            </div>
            <div class="input-item">
                <div class="input-item-prepend"><span class="input-item-text" >区县</span></div>
                <select id='district' style="width:100px" onchange='search(this)'></select>
            </div>
            <div class="input-item">
                <div class="input-item-prepend"><span class="input-item-text" >乡/街道</span></div>
                <select id='street' style="width:100px" onchange='search(this)'></select>
            </div>
            <div class="input-item">
                <div class="input-item-prepend"><span class="input-item-text" >村委会</span></div>
                <select id='hamlet' style="width:100px" onchange='setCenter(this)'></select>
            </div>
            <hr><button class="btn" onclick="register()" style="margin-right:1rem;width: 30%">注册</button>
                <button class="btn" onclick="backtologin()" style="margin-right:1rem;width: 30%">返回登录</button>
        </div>
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=a95f2a626d3afd67fb6ae4231c8997d5&plugin=AMap.DistrictSearch"></script>
        <script type="text/javascript">
            var map, district, polygons = [], tempcode, datares;
            var citySelect = document.getElementById('city');
            var districtSelect = document.getElementById('district');
            var areaSelect = document.getElementById('street');
            var hamletSelect = document.getElementById('hamlet');
            $.ajax({
                url: "/aidog/api/register/4",
                async:false,
                type: "GET",
                success: function (data) {
                    datares = eval("(" + data + ")");
                    var data0 = [], option0 = {}, option1 = {}, option2 = {},option3 = {},option4 = {},option5 = {},option6 = {},option7 = {};
                    option0.districtcode = "150000000000"; option0.districtname = "内蒙古自治区";
                    data0[0] = option0;
                    option1.districtcode = "510000000000"; option1.districtname = "四川省";
                    data0[1] = option1;
                    option2.districtcode = "530000000000"; option2.districtname = "云南省";
                    data0[2] = option2;
                    option3.districtcode = "540000000000"; option3.districtname = "西藏自治区";
                    data0[3] = option3;
                    option4.districtcode = "610000000000"; option4.districtname = "陕西省";
                    data0[4] = option4;
                    option5.districtcode = "620000000000"; option5.districtname = "甘肃省";
                    data0[5] = option5;
                    option6.districtcode = "630000000000"; option6.districtname = "青海省";
                    data0[6] = option6;
                    option7.districtcode = "640000000000"; option7.districtname = "宁夏回族自治区";
                    data0[7] = option7;
                    datares.data0 = data0;
                }
            });


            map = new AMap.Map('container', {
                resizeEnable: true,
                center: [116.30946, 39.937629],
                zoom: 3
            });
            //行政区划查询
            var opts = {
                subdistrict: 1,   //返回下一级行政区
                showbiz:false  //最后一级返回街道信息
            };
            district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
            district.search('中国', function(status, result) {
                if(status=='complete'){
                    getData(result.districtList[0]);
                }
            });
            function getData(data,level) {
                var bounds = data.boundaries;
                if (bounds) {
                    for (var i = 0, l = bounds.length; i < l; i++) {
                        var polygon = new AMap.Polygon({
                            map: map,
                            strokeWeight: 1,
                            strokeColor: '#0091ea',
                            fillColor: '#80d8ff',
                            fillOpacity: 0.2,
                            path: bounds[i]
                        });
                        polygons.push(polygon);
                    }
                    map.setFitView();//地图自适应
                }

                //清空下一级别的下拉列表
                if (level === 'province') {
                    citySelect.innerHTML = '';
                    districtSelect.innerHTML = '';
                    areaSelect.innerHTML = '';
                    hamletSelect.innerHTML = '';
                } else if (level === 'city') {
                    districtSelect.innerHTML = '';
                    areaSelect.innerHTML = '';
                    hamletSelect.innerHTML = '';
                } else if (level === 'district') {
                    areaSelect.innerHTML = '';
                    hamletSelect.innerHTML = '';
                }else if (level === 'street') {
                    hamletSelect.innerHTML = '';
                }

                var subList = data.districtList;
                if (subList) {
                    var contentSub = new Option('--请选择--');
                    var curlevel = subList[0].level;
                    var curList =  document.querySelector('#' + curlevel);
                    curList.add(contentSub);
                    for (var i = 0, l = subList.length; i < l; i++) {
                        var name = subList[i].name;
                        var levelSub = subList[i].level;
                        var cityCode = subList[i].citycode;
                        contentSub = new Option(name);
                        contentSub.setAttribute("value", levelSub);
                        contentSub.center = subList[i].center;
                        contentSub.adcode = subList[i].adcode;
                        curList.add(contentSub);
                    }
                }

            }
            function search(obj) {
                //清除地图上所有覆盖物
                for (var i = 0, l = polygons.length; i < l; i++) {
                    polygons[i].setMap(null);
                }
                var option = obj[obj.options.selectedIndex];
                var keyword = option.text; //关键字
                var adcode = option.adcode;
                district.setLevel(option.value); //行政区级别
                district.setExtensions('all');
                //行政区查询
                //按照adcode进行查询可以保证数据返回的唯一性
                if(option.value != "street"){
                    getDistrictcode(option.value,option.text,tempcode);
                    district.search(adcode, function(status, result) {
                        if(status === 'complete'){
                            getData(result.districtList[0],obj.id);
                        }
                    });
                }else{
                    //乡到村级
                    alert(option.text);
                }
            }
            function setCenter(obj){
                map.setCenter(obj[obj.options.selectedIndex].center)
            }

            function register() {
                alert("请联系管理员！");
            }

            function backtologin() {
                window.location.href = "login.html";
            }
            
            function getDistrictcode(level,name,tempcode){
                if(level == "province"){
                    for(var k=0;k<datares.data0.length;k++){
                        if(name == datares.data0[k].districtname){
                            tempcode = datares.data0[k].districtcode;
                            break;
                        }
                    }
                    if(tempcode == null || tempcode == ""){
                        alert("该省份为非流行区，请在为流行区的省份注册！");
                    }
                }else if(level == "city"){
                    for(var k=0;k<datares.data1.length;k++){
                        tempcode = tempcode.substring(0,2);
                        if(datares.data1[k].districtcode.substring(0,2) == tempcode && name == datares.data1[k].districtname){
                            tempcode = datares.data1[k].districtcode;
                            break;
                        }
                    }
                    if(tempcode.length == 2){
                        alert("该市为非流行区，请在为流行区的市区注册！");
                    }
                }else if(level == "district"){
                    for(var k=0;k<datares.data2.length;k++){
                        tempcode = tempcode.substring(0,4);
                        if(datares.data2[k].districtcode.substring(0,4) == tempcode && name == datares.data2[k].districtname){
                            tempcode = datares.data2[k].districtcode;
                            break;
                        }
                    }
                    if(tempcode.length == 4){
                        alert("该县为非流行区，请在为流行区的县注册！");
                    }
                }else if(level == "street"){
                    for(var k=0;k<datares.data3.length;k++){
                        tempcode = tempcode.substring(0,6);
                        if(datares.data3[k].districtcode.substring(0,6) == tempcode && name == datares.data3[k].districtname){
                            tempcode = datares.data3[k].districtcode;
                            break;
                        }
                    }
                    if(tempcode.length == 6){
                        alert("该乡为非流行区，请在为流行区的乡注册！");
                    }
                }
            }
        </script>
        <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
    </div>
</body>
</html>